<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
export default {
  created() {
    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer,
    ]);
  },
  mounted() {
    // 接下来的使用就跟之前一样，初始化图表，设置配置项
    var myChart = echarts.init(document.getElementById("main"));
    let option = {
      title: {
        text: "近七天接送趋势图",
      },
      tooltip: {},
      xAxis: {
        data: [
          "4月15日",
          "4月16日",
          "4月17日",
          "4月18日",
          "4月19日",
          "4月20日",
          "4月21日",
        ],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [34, 40, 36, 40, 38, 2, 4],
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<template>
  <h1 class="title">订单概述详情：</h1>
  <div class="chart-container">
    <div class="sub-container">
      <div class="sub-box">
        <div class="sub-line">今日成交:</div>
        <div class="text-containers">
          <div class="sub-item">成交量</div>
          <div class="sub-number sub-line">38</div>
        </div>
        <div class="text-containers">
          <div class="sub-item">成交额</div>
          <div class="sub-number sub-line">￥3040.00</div>
        </div>
      </div>
      <div class="sub-box">
        <div class="sub-line">昨日成交:</div>
        <div class="text-containers">
          <div class="sub-item">成交量</div>
          <div class="sub-number sub-line">40</div>
        </div>
        <div class="text-containers">
          <div class="sub-item">成交额</div>
          <div class="sub-number sub-line">￥3200.00</div>
        </div>
      </div>
      <div class="sub-box">
        <div class="sub-line">近7日成交:</div>
        <div class="text-containers">
          <div class="sub-item">成交量</div>
          <div class="sub-number sub-line">194</div>
        </div>
        <div class="text-containers">
          <div class="sub-item">成交额</div>
          <div class="sub-number sub-line">￥15520.00</div>
        </div>
      </div>
      <div class="sub-box">
        <div class="sub-line">近1个月成交:</div>
        <div class="text-containers">
          <div class="sub-item">成交量</div>
          <div class="sub-number sub-line">974</div>
        </div>
        <div class="text-containers">
          <div class="sub-item">成交额</div>
          <div class="sub-number sub-line">￥77920.00</div>
        </div>
      </div>
    </div>
  </div>

  <h1 class="title">接送趋势图示：</h1>
  <div class="chart-container">
    <div id="main"></div>
  </div>
</template>

<style>
.text-line {
  font-size: 20px; /* 调整文字大小 */
  margin-right: 0px; /* 调整文字之间的间距 */
}
/* .title {
  font-size: 24px;
  margin-bottom: 10px;
} */
.chart-container {
  width: 1125px;
  height: 440px;
  border: 1px;
  border-radius: 8px;
  margin: 40px;
  padding: 10px;
  background: white;
}

.sub-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.sub-box {
  width: 500px;
  height: 200px;
  border: 2px solid #eaeaea;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex; /* 将 sub-box 设置为 flex 布局 */
  flex-direction: row; /* 将子元素水平排列 */
  justify-content: space-between; /* 将子元素两端对齐 */
  align-items: center; /* 将子元素垂直居中 */
  justify-content: space-around; /* 子元素在两端留有空白并均匀分布 */
}
.sub-line {
  white-space: pre-line; /* 保留换行符并进行换行 */
  line-height: 2; /* 设置行间距为 1.2 倍字体大小 */
}
.sub-item {
  font-size: 20px; /* 调整文字大小 */
  margin-right: 10px; /* 调整文字之间的间距 */
}
.sub-number {
  font-size: 20px; /* 调整数字大小 */
  margin-top: 10px; /* 调整数字与文字之间的间距 */
}
.text-containers {
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  flex-direction: column;
}

#main {
  width: 100%;
  height: 100%;
}

.el-row {
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
</style>
